﻿<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>epub.js viewer</title>
    <script src="~/epub/jszip.min.js"></script>
    <script src="~/epub/epub.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100vw;
            overflow-x: hidden;
        }

        #context {
            display: flex;
            width: 100vw;
            background: #eee;
            position: relative;
        }

        #nav {
            width: 20em;
            position: fixed;
            padding: 1em;
            overflow: auto;
            height: 100vh;
        }

            #nav li {
                line-height: 1.5em;
                list-style: none;
                padding-left: 1em;
            }

                #nav li a {
                    cursor: pointer;
                }

                    #nav li a:hover {
                        color: #ee1111;
                        text-decoration: dashed 1px #ee1111;
                    }

        #viewer {
            max-width: 80em;
            margin: 0 auto;
            background: white;
        }
    </style>
</head>
<body>
    <div id="context">
        <div id="nav">
            <div>
                <button id="prev">上一页</button>
                <button id="next">下一页</button>
            </div>
            <div>
                <ul id="toc">
                </ul>
            </div>
        </div>
        <div id="viewer"></div>
    </div>

    <script>

        function renderEpub(blob) {

            var $viewer = document.getElementById("viewer");
            var currentSection;
            var currentSectionIndex = 6;

            function display(item) {
                var section = book.spine.get(item);
                if (section) {
                    currentSection = section;
                    section.render().then(function (html) {
                        // $viewer.srcdoc = html;
                        $viewer.innerHTML = html;
                    });
                }
                return section;
            }

            var book = ePub(blob, { store: "epubjs-test" });
            var rendition = book.renderTo("viewer", {
                //manager: "continuous",
                //flow: "scrolled-doc",
                allowScriptedContent: true,
                width: "70em"
            });
            function renderToc(toc, docfrag) {
                toc.forEach(function (chapter) {
                    var li = document.createElement("li");
                    var a = document.createElement("a");
                    a.textContent = chapter.label;
                    a.ref = chapter.href;
                    a.onclick = function (e) {
                        let url = e.target.ref
                        rendition.display(url);
                        return false;
                    }
                    li.appendChild(a);
                    if (chapter.subitems && chapter.subitems.length) {
                        var ul = document.createElement("ul");
                        renderToc(chapter.subitems, ul);
                        li.appendChild(ul);
                    }

                    docfrag.appendChild(li);
                });
            }
            var displayed = rendition.display();


            book.opened.then(function () {
                display(currentSectionIndex);
            });

            book.loaded.navigation.then(function (toc) {
                var $select = document.getElementById("toc"),
                    docfrag = document.createDocumentFragment();

                renderToc(toc, docfrag);

                $select.appendChild(docfrag);
            });


            var next = document.getElementById("next");
            next.addEventListener("click", function () {
                rendition.next();
            }, false);

            var prev = document.getElementById("prev");
            prev.addEventListener("click", function () {
                rendition.prev();
            }, false);

            var keyListener = function (e) {

                // Left Key
                if ((e.keyCode || e.which) == 37) {
                    rendition.prev();
                }

                // Right Key
                if ((e.keyCode || e.which) == 39) {
                    rendition.next();
                }

            };

            rendition.on("keyup", keyListener);
            document.addEventListener("keyup", keyListener, false);
        }



        //var url = "http://localhost:5168/api/File/download?file=@(ViewBag.Url)"
        const params = new URLSearchParams(window.location.search);
        var fetchurl = "http://localhost:5168/api/File/download?file=" + params.get("url")
        // Load the opf
        fetch(fetchurl).then(res => {
            res.blob().then(b => {
                console.log(b)
                renderEpub(b)
            })
        })

    </script>
</body>
</html>